import React, { useState } from 'react'
import { Tabs, Card, Form, Input, Checkbox, Button } from 'antd';
import './login.scss'
import API from '../../api'
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const navigate = useNavigate()
  const [loginParams, setLoginParams] = useState({
    captchaId: "",
    role: "inspec",
    verifyCode: ""
  })
  // 登陆框提交登陆调用的函数
  const EnterSys = async (values) => {
    // 走登陆接口之后  返回的data为个人数据
    const data = await API.login({ ...values, ...loginParams })
    // console.log(data)
    // 将个人用户的token存储在local里面
    localStorage.setItem('token',data.token)
    // 获取当前角色权限  需在axios上配置请求头信息，添加token
    const userInfo = await API.getUserInfo()
    console.log(userInfo)
    localStorage.setItem('userInfo',JSON.stringify(userInfo))
    // 不管成功与否都会执行下一行代码，所以要在axios进行拦截判断
    // 跳转home页
    navigate('/storeManage/company')
  }
  const tabChange = (activeKye) => {
    setLoginParams({ ...loginParams, role: activeKye })
  }
  return (
      <div className='animate__animated animate__flip'>
        <Card
          title="管理系统哦"
          style={{
            width: 500,
          }}
        >
          <Tabs items={[
            {
              label: '员工入口',
              key: 'inspec'
            },
            {
              label: '管理',
              key: 'familyPartyRecord'
            }
          ]}
            onChange={tabChange}>
          </Tabs>
          <Form onFinish={EnterSys}>
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入账号',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                登陆系统
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
  )
}
